<template>
  <div class="flex w-full min-h-screen flex-col bg-gray-100">
    <header-cmp></header-cmp>
    <div class="flex">
      <el-input v-model="search" class="input-with-select" placeholder="请输入内容">
        <template v-slot:append>
          <el-button icon="el-icon-search" @click="init(true)"></el-button>
        </template>
      </el-input>
      <el-button placeholder="新增" @click="edit">新增</el-button>
    </div>
    <div v-if="page.records" class="w-full flex-grow">
      <!--      <div v-for="(item, index) in page.records" :key="index">-->
      <!--        <div class="card mt-3">-->
      <!--          &lt;!&ndash;            <img src="image.jpg" class="card-img-top" alt="卡片图片">&ndash;&gt;-->
      <!--          <div class="card-header">-->
      <!--            {{ item.ask }}-->
      <!--          </div>-->
      <!--          <div class="card-body">-->
      <!--            {{ item.value }}-->
      <!--          </div>-->
      <!--          <div class="card-footer d-none">-->
      <!--          </div>-->
      <!--        </div>-->
      <!--      </div>-->
      <el-table :data="page.records">
        <el-table-column label="ask" prop="ask"></el-table-column>
        <el-table-column label="value" prop="value">
          <template #default="scope">
            <pre class="overflow-auto">{{ scope.row.value }}</pre>
          </template>
        </el-table-column>
        <el-table-column label="value" prop="value">
          <template #default="scope">
            <el-button @click="edit(scope.row)">编辑</el-button>
            <el-button @click="del(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination :current-page="page.current" :page-size="page.size" :total="page.total"
                     layout="total,prev, pager, next" @current-change="init"></el-pagination>
    </div>
    <footer-cmp></footer-cmp>
  </div>
</template>

<script>
import FooterCmp from "@/views/components/FooterCmp.vue";
import HeaderCmp from "@/views/components/HeaderCmp.vue";
import {getJson} from "@/assets/http";
import {getPageYmlApi} from "@/assets/api";
import IconCmp from "@/views/components/IconCmp.vue";
import {YmlAddEdit} from "@/index";

export default {
  name: "TianWen",
  components: {IconCmp, HeaderCmp, FooterCmp},
  data() {
    return {
      search: '',
      page: {current: 0, size: 10, records: [], total: 0, isLoading: false},
    }
  },
  created() {
    this.init()
  },
  methods: {
    async init(isReload) {
      if (isReload === true) {
        this.page.current = 0;
      }
      let params = {ask: this.search, parentId: 0, current: this.page.current + 1, size: this.page.size};
      let res = await getJson(getPageYmlApi, params);
      this.page = res.data
    },
    edit(item) {
      this.$router.push({path: YmlAddEdit, query: {id: item.id}})
    },
    del(item) {

    },
  }
}
</script>

<style scoped lang="less">
</style>
